<!-- 安全考试-学习资源-研学资讯 -->
<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-left">
      <div class="JNPF-common-title">
        <h2>资讯栏目</h2>
        <span class="options">
          <el-tooltip content="资讯栏目" placement="top">
            <el-link icon="el-icon-menu" :underline="false"/>
          </el-tooltip>
        </span>
      </div>

      <el-scrollbar class="JNPF-common-el-tree-scrollbar">
        <el-tree :props="defaultProps"
              accordion :data="treeData"  node-key="id"
          class="JNPF-common-el-tree">
          <span class="custom-tree-node" slot-scope="{ data }">
            <i :class="data.icon" />
            <span class="text">{{data.label}}</span>
          </span>
        </el-tree>
      </el-scrollbar>
    </div>

    <div class="JNPF-common-layout-center">

      <div class="JNPF-common-layout-main JNPF-flex-main">
        
        <el-row class="JNPF-common-search-box" :gutter="16">
          <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="资讯标题">
                <el-input v-model="keyword" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>

          <template v-if="showAll">
           <el-col :span="6">
            <el-form-item label="难易程度">
              <el-select v-model="keyword" placeholder="请选择">
                <el-option
                  v-for="item in statelist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          </template>
          
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" >查询</el-button>
              <el-button type="success" icon="el-icon-plus" @click="insert(undefined)">新增</el-button>
              <!-- <el-button type="success" icon="el-icon-download">导出</el-button> -->
              <!-- <el-button type="text" icon="el-icon-arrow-down" @click="showAll = true" v-if="!showAll">展开</el-button> -->
              <!-- <el-button type="text" icon="el-icon-arrow-up" @click="showAll = false" v-else>收起</el-button> -->
            </el-form-item>
          </el-col>
        </el-form>
        </el-row>

        <div class="JNPF-common-layout-main JNPF-flex-main">
        <JNPF-table :data="list" border v-loading="loading">
          <el-table-column prop="FCATTYPE" label="资讯栏目" width="115" ></el-table-column>
          <el-table-column prop="FCATNO" label="资讯编号" width="105"></el-table-column>
          <el-table-column prop="FCATNAME" label="资讯标题" ></el-table-column>
          <el-table-column prop="FBEGDATE" label="显示起日" width="95"></el-table-column>
          <el-table-column prop="FENDDATE" label="显示讫日" width="95"></el-table-column>
          <el-table-column prop="FSEQ" label="排序" width="55"></el-table-column>
          <el-table-column fixed="left" label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button @click.native.prevent="insert(scope.row.FCATNO)" icon="el-icon-edit" type="text" size="small">
                编辑
              </el-button>
              <el-popconfirm title="确定删除当前数据吗？" @confirm="Catdelete(scope.row.FCATNO)">
                <el-button slot="reference" icon="el-icon-delete" style="color: red;margin-left: 10px;"
                  type="text">删除</el-button>
              </el-popconfirm>
              <el-button @click.native.prevent="insert(scope.row.FCATNO)" icon="el-icon-edit" type="text" size="small">
                发布
              </el-button>
              <el-button @click.native.prevent="insert(scope.row.FCATNO)" icon="el-icon-edit" style="color: red;margin-left: 10px;" type="text" size="small">
                撤回
              </el-button>
            </template>
          </el-table-column>
        </JNPF-table>
        <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"/>
        <Form ref="Form"  :formationlist="customlist" />
      </div>

       
      </div>

    </div>
  </div>
</template>

<script>
import Form from "./Form.vue"
export default {
  name: 'base05',
  components: { Form },
  data() {
    return {
      activeName: 'first',

      keyword: '',
      showAll:false,
      list: [],
      statelist:[
        {value:0,label:"全部"}
        ,{value:1,label:"未审核"}
        ,{value:2,label:"已审核"}
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeData: [{
          label: "最新资讯",
          children: []
          },{
          label: "最新政策",
          children: []
          },{
          label: "研学活动",
          children: []
          },{
          label: "研学知识",
          children: []
          },{
          label: "研学课堂",
          children: []
          }
         ],
      total: 0,
      listLoading: false,
      listQuery: {
          page: 1,
          limit: 20,
          sort: "desc",
          sidx: "",
          fcatno: "",
          fcatname: ""
        },
      formVisible: false,

      // 参考题库 https://max.book118.com/html/2024/1024/6021020025010235.shtm
      //https://wenku.baidu.com/tfview/aea88bcba98271fe900ef943.html?fr=launch_ad&SS-bdtg47=&utm_source=bdss-WD&utm_medium=cpc&keyword=%E9%AB%98%E6%A0%A1%E5%AE%9E%E9%AA%8C%E5%AE%A4%E5%AE%89%E5%85%A8%E8%80%83%E8%AF%95%E9%A2%98%E5%BA%93%E7%AD%94%E6%A1%88&utm_account=SS-bdtg47&utm_term=5&utm_content=4&e_creative=59921291097&e_keywordid=416730695876&bd_vid=9336939463705346823&_wkts_=1734261811500&needWelcomeRecommand=1
      list:[
            {
            "FCATNAME": "传承耕读文化 践行育人初心",
            "FCATTYPE": "最新资讯",
            "FCATNO"  :"250430001",
            "FBEGDATE": "2025-05-01",
            "FENDDATE": "2025-05-31",
            "FSEQ":1
            },{
            "FCATNAME": "区域联动展风采 劳动体验促提升",
            "FCATTYPE": "最新资讯",
            "FCATNO"  :"250430002",
            "FBEGDATE": "2025-05-01",
            "FENDDATE": "2025-05-31",
            "FSEQ":2
            }
            ,{
            "FCATNAME": "研学旅行实践基地（地学类）名单公示",
            "FCATTYPE": "最新资讯",
            "FCATNO":"250430003",
            "FBEGDATE": "2025-05-01",
            "FENDDATE": "2025-05-31",
            "FSEQ":3
            },{
            "FCATNAME": "研学旅行实践基地（营地）创建单位名单公布",
            "FCATTYPE": "最新资讯",
            "FCATNO"  :"250430004",
            "FBEGDATE": "2025-05-01",
            "FENDDATE": "2025-05-31",
            "FSEQ":4
            },{
            "FCATNAME": "我国研学旅行发展的主要矛盾是什么？有哪些应对策略？",
            "FCATTYPE": "最新资讯",
            "FCATNO"  :"250430005",
            "FBEGDATE": "2025-05-01",
            "FENDDATE": "2025-05-31",
            "FSEQ":5
            },{
            "FCATNAME": "热门的亲子研学旅行模式有哪些？一起来看",
            "FCATTYPE": "最新资讯",
            "FCATNO"  :"250430006",
            "FBEGDATE": "2025-05-01",
            "FENDDATE": "2025-05-31",
            "FSEQ":6
            },
        ],

    }
  },
  created() {
  },
  methods: {
   initData(){
     console.log("initData")
   },

   insert(row) {
        this.$refs.Form.init(row);
      },
  }
}
</script>